import { $$, app } from "../experience/utils/F7.js";
import { CONF } from "../configure/Assets.js";
import Db from "../experience/db/Db.js";
import Api from "../experience/api/Api.js";
import Utils from "../experience/utils/Utils.js";
import Algorithm from "../experience/utils/Algorithm.js";
import Drawer from "../experience/drawer/Drawer.js";
import Uploader from "../component/other/Uploader.js";
import Position from "../component/route/Position.js";
import Selector from "../component/other/Selector.js";
import WarningV2 from "../component/warning/WarningV2.js";
import PersonV2 from "../component/location/PersonV2.js";


class Kalafina {
    constructor() {
        if (Kalafina.instance) {
            return Kalafina.instance;
        }
        Kalafina.instance = this;

        this.db = new Db();
        this.api = new Api();
        this.utils = new Utils();
        this.algo = new Algorithm();
        this.drawer = new Drawer();

        this.init().then(() => {
            new Uploader();
            new Position();
            new WarningV2();
            new Selector();
            new PersonV2();

            $$("#upload-name-text").html("图纸版本");
            $$("#upload-code-text").html("图纸类型");
            $$("#upload-mine-name").val("kalafina");
            $$("#upload-mine-name").attr("readonly","readonly");
            $$("#upload-mine-code").val("kalafina");
            $$("#upload-mine-code").attr("readonly","readonly");

            console.log("Walküre Fly...");
        });
    }

    htmls() {
        const div = `
            <header id="header">
                <div class="row">
                    <div class="col-100 function">
                        <button class="button button-fill color-primary" id="upload-popup">更新图纸</button>
                        <button class="button button-fill color-primary" id="position-add">增加分站</button>
                        <button class="button button-fill color-primary" id="drawing-warning-area_v2">增加预警区域</button>
                    </div>
                </div>
            </header>
        `;
        $$("#app").prepend(div);
        $$("#article").append(div);
        this.utils.setLocalStorage("theme", true);
        $$(".ol-viewport").css("background", CONF.PERSON_BACKGROUND);
    }

    // 全局初始化
    async init() {
        this.htmls();

        // 获取配置用的code信息
        const code = await this.api.getCode();
        this.utils.setLocalStorage('code', code.data);
        this.utils.setLocalStorage('edit', true);

        // 判断本地是否已经有煤矿信息了
        const config = this.algo.getConfig();
        if (config === null) {
            const metas = await this.api.getMetas("kalafina");
            if (metas.code === 0 && metas.data.length > 0) {
                const meta_id = metas.data[0].meta_id;
                app.dialog.preloader("正在获取矿图...");
                const data = await this.api.getVector(meta_id);
                if (data.code === 0) {
                    // 初始化config信息
                    this.drawer.init(data.data.meta, data.data.layers);
                    // 将从网络上取下来的数据存入数据库
                    this.db.init(data.data).then(() => {
                        // 从本地提取数据
                        this.drawer.location().then(() => {
                            app.dialog.close();
                        })
                    });
                }
            }
        } else {
            // 从本地获取数据
            await this.drawer.location();
        }
    }
}

new Kalafina();